<!-- Charts section start -->
<section id="charts-section">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Charts</h4>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-4 col-lg-12">
            <div class="card text-white bg-info">
                <div class="card-content">
                    <div class="position-relative">
                        <div class="chart-title position-absolute mt-2 ml-2 white">
                            <h1 class="display-4 text-white">84%</h1>
                            <span>Employees Satisfied</span>
                        </div>
                        <canvas id="emp-satisfaction" class="height-450 block"></canvas>
                        <div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3 white">
                            <a href="#" class="btn bg-info bg-darken-3 mr-1 white">Statistics <i class="ft-bar-chart"></i></a> for the last year.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="row">
                        <div class="col-lg-3 col-md-12">
                            <div class="chart-stats text-center my-3">
                                <div class="new-users my-2 overflow-hidden clearfix">
                                    <span>New Users</span>
                                    <h1 class="display-4">25%</h1>
                                </div>
                                <div class="returning-users my-2 overflow-hidden">
                                    <span>Returning Users</span>
                                    <h1 class="display-4">159</h1>
                                </div>
                                <div class="page-views my-2 overflow-hidden">
                                    <span>Page Views</span>
                                    <h1 class="display-4">246</h1>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-12">
                            <div class="card-body">
                                <ul class="list-inline text-center">
                                    <li class="mr-1">
                                        <h6><i class="la la-circle danger"></i> <span>iOS</span></h6>
                                    </li>
                                    <li class="mr-1">
                                        <h6><i class="la la-circle warning"></i> <span>Windows</span></h6>
                                    </li>
                                    <li class="mr-1">
                                        <h6><i class="la la-circle success"></i> <span>Android</span></h6>
                                    </li>
                                </ul>
                                <div class="chartjs">
                                    <canvas id="line-stacked-area" class="height-350"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="earning-chart position-relative">
                        <div class="chart-title position-absolute mt-2 ml-2">
                            <h1 class="display-4">$9865</h1>
                            <span class="text-muted">Total Earning</span>
                        </div>
                        <canvas id="earning-chart" class="height-450 block"></canvas>
                        <div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3">
                            <a href="#" class="btn bg-danger mr-1 white">Statistics <i class="ft-bar-chart"></i></a> <span class="text-muted">for the <a href="#" class="danger darken-2">last year.</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body sales-growth-chart">
                        <div class="chart-title mb-2">
                            <h1 class="display-4">52%</h1>
                            <span class="text-muted">Sales Growth Rate</span>
                        </div>
                        <div id="sales-growth-chart" class="height-300"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-content bg-success">
                    <div class="card-body sales-growth-chart">
                        <div id="mobile-sales" class="height-250"></div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="chart-title mb-1">
                        <span class="text-muted">Total mobile units sold and total earning statistics.</span>
                    </div>
                    <ul class="list-inline text-center clearfix mt-2">
                        <li class="mr-3"><span class="text-muted">Total Units Sold</span><h2 class="block">18.6 k</h2></li>
                        <li><span class="text-muted">Total Earnings</span><h2 class="block">64.54 M</h2></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body sales-growth-chart">
                        <div id="monthly-sales" class="height-300"></div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="chart-title mb-1 text-center">
                        <span class="text-muted">Total monthly Sales.</span>
                    </div>
                    <div class="chart-stats text-center">
                        <a href="#" class="btn btn-sm btn-info mr-1">Statistics <i class="ft-bar-chart"></i></a> <span class="text-muted">for the last year.</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <canvas id="posts-visits" class="height-400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-7 col-lg-12">
            <div class="card">
                <div class="card-content ">
                    <div id="cost-revenue" class="height-250 position-relative"></div>
                </div>
                <div class="card-footer">
                    <div class="row mt-1">
                        <div class="col-3 text-center">
                            <h6 class="text-muted">Total Products</h6>
                            <h2 class="block font-weight-normal">18.6 k</h2>
                            <div class="progress progress-sm mt-1 mb-0 box-shadow">
                                <div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-3 text-center">
                            <h6 class="text-muted">Total Sales</h6>
                            <h2 class="block font-weight-normal">64.54 M</h2>
                            <div class="progress progress-sm mt-1 mb-0 box-shadow">
                                <div class="progress-bar bg-gradient-x-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-3 text-center">
                            <h6 class="text-muted">Total Cost</h6>
                            <h2 class="block font-weight-normal">24.38 B</h2>
                            <div class="progress progress-sm mt-1 mb-0 box-shadow">
                                <div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-3 text-center">
                            <h6 class="text-muted">Total Revenue</h6>
                            <h2 class="block font-weight-normal">36.72 M</h2>
                            <div class="progress progress-sm mt-1 mb-0 box-shadow">
                                <div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-5 col-lg-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <canvas id="advertisement-expense" height="360"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-4 col-lg-12">
            <div class="card bg-danger">
                <div class="card-content">
                    <canvas id="global-sales" class="height-350 px-2 pt-2"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-lg-12">
            <div class="card bg-success">
                <div class="card-content">
                    <div class="card-body">
                        <canvas id="revenue-comparision" class="height-300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Charts section end -->